<template>
  <div>
    <div>
      <div>
        <el-form :inline="true" :model="search" class="demo-form-inline">
          <el-form-item label="入学日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="search.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker placeholder="选择日期" v-model="search.date2" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="qx">全选</el-button>
            <el-button type="primary" @click="fx">反选</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="aaa"
        :data="form"
        stripe
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="学生姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="180">
        </el-table-column>
        <el-table-column
          prop="clname"
          label="所在班级">
        </el-table-column>
        <el-table-column
          prop="date"
          label="入学日期">
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="search.page"
        :page-size="search.pageSize"
        layout="total, prev, pager, next"
        :total="search.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StudentView',
  data () {
    return {
      form: [],
      search: {
        page: 1,
        pageSize: 4,
        total: 0,
        date1: null,
        date2: null
      }
    }
  },
  methods: {
    qx () {
      this.form.forEach(x => {
        this.$refs.aaa.toggleRowSelection(x, true)
      })
    },
    fx () {
      this.form.forEach(x => {
        this.$refs.aaa.toggleRowSelection(x)
      })
    },
    onSubmit () {
      this.query()
    },
    query () {
      this.axios.post('http://localhost:8702/studentv/list', this.search).then(res => {
        this.form = res.data.records
        this.search.page = res.data.current
        this.search.pageSize = res.data.size
        this.search.total = res.data.total
      })
    },
    handleSizeChange (val) {
      this.search.pageSize = val
      this.query()
    },
    handleCurrentChange (val) {
      this.search.page = val
      this.query()
    }
  },
  created () {
    this.query()
  }
}
</script>

<style scoped>

</style>
